<template>
    <el-card class="account-container">
        <div style="line-height: 100px">
            <el-form
                    ref="modifyForm"
                    :model="formData.data"
                    status-icon
                    :rules="formData.rules"
                    label-width="120px"
                    class="demo-ruleForm"
            >
                <el-form-item label="旧密码" prop="oldPass">
                    <el-input v-model.number="formData.data.oldPass" />
                </el-form-item>
                <el-form-item label="新密码" prop="pass">
                    <el-input v-model="formData.data.pass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input
                            v-model="formData.data.checkPass"
                            type="password"
                            autocomplete="off"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm"
                    >提交修改</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script setup>
    import {reactive, ref} from "vue";
    import {ElMessage} from "element-plus";
    import {modifyPassword} from '@/api/user'
    const modifyForm = ref(null)
    const formData = reactive({
        data: {
            oldPass: '',
            pass: '',
            checkPass:''
        },
        rules: {
            oldPass: [
                {required: 'true', message: '旧密码不能为空', trigger: 'blur'}
            ],
            pass: [
                {required: 'true', message: '密码不能为空', trigger: 'blur'}
            ],
            checkPass:[
                {required: 'true', message: '确认密码不能为空', trigger: 'blur'}
            ]
        }
    })
    const submitForm=()=>{
        if(formData.data.pass!=formData.data.checkPass){
            ElMessage.error("两次密码不同")
        }else {
            modifyForm.value.validate((valid) => {
                if (valid) {
                    modifyPassword(formData.data).then((res) => {
                        ElMessage.success("密码修改成功")
                        router.push({path: "/login"})
                    })
                } else {
                    return false;
                }
            })
        }
    }
</script>

<style scoped>

</style>